前言

    設計中秋卡片應用程式，練習用Compose 加文字和圖片

加上圖片及預覽

把圖片放到 res/drawable 下，用painterResource 讀取圖檔id

@Composable
fun GreenImage(){
    Image(painter = painterResource(id = R.drawable.moon), contentDescription = "moon")
}    

@Preview(showBackground = true)
@Composable
fun GreetingImagePreview() {
    GreenImage()
}

加上文字與圖片重新排版

利用Box() 物件，來把圖片和文字疊加起來 

@Composable
fun Greeting(name: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Box() {
            GreenImage()
            Text(
                text = name,
                modifier = Modifier.align(Alignment.TopStart),
                fontSize = 32.sp,
                color = Color.White,
                lineHeight = 116.sp,
                textAlign = TextAlign.Center
            )
            Text(
                text = from,
                fontSize = 28.sp,
                color = Color.White,
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(16.dp),
            )
        }
    }
}

參考

寫Jetpack Compose ，會很有畫面哦! - Day13 Compose 的版面配置 Layouts
https://ithelp.ithome.com.tw/articles/10294404